<template>
  <div>
    <div v-if="productData.id != undefined">
      <el-button @click="handleUpdate" type="primary" size="mini">编辑</el-button>
      <el-button @click="handleStatus" type="danger" size="mini" v-if="productData.status !== 0">
        <span v-if="productData.status === 1">停用</span>
        <span v-else>启用</span>
      </el-button>
      <span style="float: right;margin-top: 5px">{{deviceData.deviceMaker + ' ' + productData.deviceModel + ' ' + productData.productName}}</span>
    </div>
    <div class="block" v-if="productData.id != undefined">
      <el-upload
        class="upload-demo"
        :show-file-list="false"
        action=""
        :http-request="uploadFile"
        :on-change="handleImgChange"
        :before-upload="beforeUpload"
        multiple>
        <el-image
          style="width: 400px; height: 200px; border-radius: 10px;margin-top: 10px"
          v-if="productData.imageUrl"
          :src="productData.imageUrl"
          fit="fill">
        </el-image>
        <el-image v-else style="width: 400px; height: 200px; border-radius: 10px;margin-top: 10px;background-color: #5a5e66">
          <div slot="error" class="image-slot">
            <i><el-icon style="font-size: 50px;margin-top: 80px" class="el-icon-video-camera"/></i>
          </div>
        </el-image>
      </el-upload>
    </div>
    <div style="font-size: 14px" v-if="productData.id != undefined">
      <el-row>
        <div style="margin-top: 10px">详细地址：{{productData.address}}</div>
        <el-col :span="12">
          <div style="margin-top: 10px">
            产品状态：<span style="color: red">{{productData.status === 1 ? '运行中' : productData.status === 2 ? '停用' : productData.status === 0 ? '禁用': null}}</span>
          </div>
          <div style="margin-top: 10px">产品ID：{{productData.productNo}}</div>
          <div style="margin-top: 10px">消息协议：{{productData.messageProtocol}}</div>
          <div style="margin-top: 10px">所属机构：{{productData.affiliatedInstitution}}</div>
        </el-col>
        <el-col :span="12">
          <div style="margin-top: 10px">创建时间：{{productData.createTime}}</div>
          <div style="margin-top: 10px">所属品类：{{productData.typeName}}</div>
          <div style="margin-top: 10px">链接协议：{{productData.linkProtocol}}</div>
          <div style="margin-top: 10px">设备类型：{{productData.deviceType}}</div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <div style="margin-bottom: 10px">username：admin</div>
        </el-col>
        <el-col :span="12">
          <div style="margin-bottom: 10px">password：admin</div>
        </el-col>
        <div style="margin-top: 10px">frpbserver：frp.adaxiang.com:1000</div>
      </el-row>
    </div>
    <div>
      <DetailDialog :form="form"
                    :open="open"
                    :title="title"
                    :typeList="typeList"
                    @closeDialog="closeDialog"
                    @onSubmit="onSubmit">
      </DetailDialog>
    </div>
  </div>
</template>

<script>
import {getProductList, getTypeList, updateStatus, updateProductImg, uploadPicture, updateProduct} from "@/api/detail";

export default {
  name: 'DetailInfo',
  components: {
    DetailDialog: () => import('@/views/device/detail/component/dialog.vue')
  },
  data() {
    return {
      deviceData: this.$route.query.rows,
      productData: {},
      title: '',
      form: {},
      typeList: [],
      open: false,
      file: null,
      fileDir: '',
    }
  },
  created() {
    this.fetchData()
  },
  inject: ['reloadMap'],
  methods: {
    fetchData() {
      getProductList({did: this.deviceData.id}).then(res => {
        if (res.data == null) {
          this.$message({
            message: res.message,
            type: 'warning',
            duration: 3000
          })
        } else {
          this.productData = res.data;
        }
      })
    },
    handleUpdate() {
      this.open = true
      this.title = '编辑产品信息'
      this.getProductTypeList()
      this.form = this.productData
    },
    handleStatus() {
      let data = {
        did: this.productData.did,
        status: this.productData.status === 1 ? 2 : 1
      }
      this.$confirm('此操作将' + (data.status === 1 ? '启用' : '停用') + '该产品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus(data).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    getProductTypeList() {
      getTypeList().then(res => {
        this.typeList = res.data;
      })
    },
    onSubmit() {
      updateProduct(this.form).then(res => {
        this.$message({
          message: '更新成功',
          type: 'success',
          duration: 1000
        });
        this.open = false
        this.fetchData()
        this.reloadMap()
      })
    },
    cancel() {
      this.open = false
      this.form = {}
      this.fetchData()
    },
    closeDialog() {
      this.cancel()
    },
    handleImgChange(file) {
      this.file = file.raw;
    },
    uploadFile() {
      const file = this.file;
      const formData = new FormData();
      formData.append("file", file); // 由后端接口决定,后端参数叫file
      uploadPicture(formData).then((res) => {
        this.fileDir = res.data
        this.form = {
          imageUrl: this.fileDir,
          id: this.productData.id
        }
        updateProductImg(this.form).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000
          });
          this.fetchData()
        })
      });
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        this.$message.error('只能上传图片文件!');
      }
      return isImage;
    },
  }
}
</script>

<style scoped>
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
